<template>
  <div class="app-container">
    <div v-if="myTeach===undefined||myTeach.teachAccount===undefined">
                你还没有绑定指导老师哦！
    </div>
    <div  v-if="myTeach.teachAccount!==undefined">
        <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane label="周报管理" name="0">
          <div v-if="total>0">
            <el-row type="flex" class="row-bg" justify="center" :gutter="10">
              <el-button type="primary" plain style="float:left;" @click="$router.push('/addReport')">周报提交</el-button>
              <el-col :span="12">
                <el-input
                placeholder="请输入报告标题："
                prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
                </el-input>
              </el-col>
              <el-col :span="4">
            <el-button icon="el-icon-search" circle @click="getMyReportList()"></el-button>
              </el-col>
            </el-row>
            <el-row>
            <el-table :data="reportList" stripe style="width: 100%;margin-top:30px;" border>
              <el-table-column align="center" label="报告标题" width="80">
                <template slot-scope="scope">
                  {{ scope.row.reportTitle }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告类型" width="50">
                <template slot-scope="scope">
                  {{ scope.row.reportType }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告等级" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportLevel }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交方式" width="100">
                <template slot-scope="scope">
                  {{ scope.row.contentTypeName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交时间" width="160">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告状态" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportStatus }}
                </template>
              </el-table-column>
              <el-table-column align="header-center" label="分数">
                <template slot-scope="scope">
                  {{ scope.row.resultValue }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="Operations">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="remindVerifyReport(scope.row)">提醒审核</el-button>
                  <el-button v-if="scope.row.reportStatus ==='审核通过'" type="primary" size="small" @click="toDetail(scope.row)">报告详情</el-button>
                  <el-button v-if="scope.row.reportStatus ==='驳回'||scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="editReport(scope.row)">修改报告</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-row>
          </div>
          <div v-if="total<=0">
            还没有提交过周报哦
          </div>
        </el-tab-pane>
        <el-tab-pane label="月报管理" name="1">
          <div v-if="total>0">
            <el-row type="flex" class="row-bg" justify="center" :gutter="10">
              <el-button type="primary" plain style="float:left;" @click="$router.push('/addReport')">月报提交</el-button>
              <el-col :span="12">
                <el-input
                placeholder="请输入报告标题："
                prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
                </el-input>
              </el-col>
              <el-col :span="4">
            <el-button icon="el-icon-search" circle @click="getMyReportList()"></el-button>
              </el-col>
            </el-row>
            <el-row>
            <el-table :data="reportList" stripe style="width: 100%;margin-top:30px;" border>
              <el-table-column align="center" label="报告标题" width="80">
                <template slot-scope="scope">
                  {{ scope.row.reportTitle }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告类型" width="50">
                <template slot-scope="scope">
                  {{ scope.row.reportType }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告等级" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportLevel }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交方式" width="100">
                <template slot-scope="scope">
                  {{ scope.row.contentTypeName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交时间" width="160">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告状态" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportStatus }}
                </template>
              </el-table-column>
              <el-table-column align="header-center" label="分数">
                <template slot-scope="scope">
                  {{ scope.row.resultValue }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="Operations">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="remindVerifyReport(scope.row)">提醒审核</el-button>
                  <el-button v-if="scope.row.reportStatus ==='审核通过'" type="primary" size="small" @click="toDetail(scope.row)">报告详情</el-button>
                  <el-button v-if="scope.row.reportStatus ==='驳回'||scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="editReport(scope.row)">修改报告</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-row>
          </div>
          <div v-if="total<=0">
            还没有提交过月报哦
          </div>
        </el-tab-pane>
        <el-tab-pane label="中期报告管理" name="2">
          <div v-if="total>0">
            <el-row type="flex" class="row-bg" justify="center" :gutter="10">
              <el-button type="primary" plain style="float:left;" @click="$router.push('/addReport')">中期报告提交</el-button>
              <el-col :span="12">
                <el-input
                placeholder="请输入报告标题："
                prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
                </el-input>
              </el-col>
              <el-col :span="4">
            <el-button icon="el-icon-search" circle @click="getMyReportList()"></el-button>
              </el-col>
            </el-row>
            <el-row>
            <el-table :data="reportList" stripe style="width: 100%;margin-top:30px;" border>
              <el-table-column align="center" label="报告标题" width="80">
                <template slot-scope="scope">
                  {{ scope.row.reportTitle }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告类型" width="50">
                <template slot-scope="scope">
                  {{ scope.row.reportType }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告等级" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportLevel }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交方式" width="100">
                <template slot-scope="scope">
                  {{ scope.row.contentTypeName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交时间" width="160">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告状态" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportStatus }}
                </template>
              </el-table-column>
              <el-table-column align="header-center" label="分数">
                <template slot-scope="scope">
                  {{ scope.row.resultValue }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="Operations">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="remindVerifyReport(scope.row)">提醒审核</el-button>
                  <el-button v-if="scope.row.reportStatus ==='审核通过'" type="primary" size="small" @click="toDetail(scope.row)">报告详情</el-button>
                  <el-button v-if="scope.row.reportStatus ==='驳回'||scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="editReport(scope.row)">修改报告</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-row>
          </div>
          <div v-if="total<=0">
            还没有提交过中期报告哦
          </div>
        </el-tab-pane>
        <el-tab-pane label="实训论文报告管理" name="3">
          <div v-if="total>0">
            <el-row type="flex" class="row-bg" justify="center" :gutter="10">
              <el-button type="primary" plain style="float:left;" @click="$router.push('/addReport')">实训论文报告提交</el-button>
              <el-col :span="12">
                <el-input
                placeholder="请输入报告标题："
                prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
                </el-input>
              </el-col>
              <el-col :span="4">
            <el-button icon="el-icon-search" circle @click="getMyReportList()"></el-button>
              </el-col>
            </el-row>
            <el-row>
            <el-table :data="reportList" stripe style="width: 100%;margin-top:30px;" border>
              <el-table-column align="center" label="报告标题" width="80">
                <template slot-scope="scope">
                  {{ scope.row.reportTitle }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告类型" width="50">
                <template slot-scope="scope">
                  {{ scope.row.reportType }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告等级" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportLevel }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交方式" width="100">
                <template slot-scope="scope">
                  {{ scope.row.contentTypeName }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告提交时间" width="160">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="报告状态" width="100">
                <template slot-scope="scope">
                  {{ scope.row.reportStatus }}
                </template>
              </el-table-column>
              <el-table-column align="header-center" label="分数">
                <template slot-scope="scope">
                  {{ scope.row.resultValue }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="Operations">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="remindVerifyReport(scope.row)">提醒审核</el-button>
                  <el-button v-if="scope.row.reportStatus ==='审核通过'" type="primary" size="small" @click="toDetail(scope.row)">报告详情</el-button>
                  <el-button v-if="scope.row.reportStatus ==='驳回'||scope.row.reportStatus ==='待审核'" type="primary" size="small" @click="editReport(scope.row)">修改报告</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-row>
          </div>
          <div v-if="total<=0">
            还没有提交过实训总结报告哦
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="reportList!== undefined && reportList.length > 0">
        <el-pagination background layout="prev, pager, next"  prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currpage"
              :page-size="pageSize"
              :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getMyReportList,remindVerifyReport} from '@/api/report'
import checkPermission from '@/utils/permission' // 权限判断函数
import { getMyTeach } from '@/api/teach'

export default {
  data() {
    return {
      reportList:[],
      dialogVisible: false,
      dialogTitle: '',
      param :{
      start: 0,
      limit: 10,
      reportTitle:'',
      reportType:0
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      activeName:'0',
      myTeach:{},
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.getMyReportList()
    this.getMyTeach()
  },
  methods: {
     async getMyTeach() {
      let res = await getMyTeach()
      this.myTeach = res.bean
    },
    async getMyReportList() {
      this.param.reportType = this.activeName;
      let res = await getMyReportList(this.param)
      this.reportList = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getMyReportList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.getMyReportList();
    },
    selectReport(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.getMyReportList()
    },
    //选项卡切换时执行
    handleClick(tab, event) {
      this.param.reportTitle=''
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.param.reportType = tab.name
      this.getMyReportList();
      },
      async remindVerifyReport(row){
        let res = await remindVerifyReport(row).then(()=>{
            this.$message({
              type: 'success',
              message: '提醒教师审核成功!'
            })

            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '提醒审核失败!'
            })
            })
      },
      toDetail(row) {
     this.$router.push({
        path: "/reportDetail",
        query:{
          reportId:row.reportId
        }
        })
    },
     editReport(row) {
     this.$router.push({
        path: "/editReport",
        query:{
          reportId:row.reportId
        }
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
